/**
* Description: 菜单
*
* Created by hrx on 2023/9/18
*/
<template>
  <div class="menu">
    <el-menu
      mode="vertical"
      active-text-color="#ffd04b"
      background-color="#2e3147"
      class="el-menu-vertical"
      text-color="#fff"
      :default-active="activeMenu"
      unique-opened
      router
    >
      <el-sub-menu :index="item.path" v-for="(item, index) in menuList" :key="index">
        <template #title>
          <i style="margin-right: 20px" :class="item.meta.icon"></i>
          <span>{{ item.meta.title }}</span>
        </template>
        <el-menu-item :index="children.path" v-for="children in item.children" :key="children.path">
          {{ children.meta.title }}
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>

</template>

<script setup lang="ts">
import {useRouter,useRoute} from "vue-router";
import {computed, onMounted, ref} from "vue";

const router = useRouter();
const route = useRoute();

interface RouterData {
  path: string,
  meta: MetaData,
  children: Array<Children>,
}

interface Children {
  path: string,
  meta: MetaData,
}

interface MetaData {
  isShow: Boolean,
  title: string,
  icon: string,
}


const menuList = ref<Array<RouterData>>([])

const init = () => {
  let list: Array<RouterData> = router.getRoutes().filter(item => item.children.length > 0 && item.meta.isShow) as Array<any>;
  menuList.value = list
}

onMounted(() => {
  init();
})

const activeMenu = computed<string>(() => {
  return  route.path || menuList.value[0].path;
});

</script>

<style lang="scss" scoped>
.menu {
  .el-menu {
    height: calc(100vh - 60px);
  }
  .menu-title {
    //font-size: 16px;
  }
}
</style>